<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        class MyComponent extends React.Component {
            constructor(props) {
                super(props);
            }

            render() {
                // let child1 = <h4>Huang JX</h4>;
                // let child2 = <h4>Huang JX</h4>;
                // let child3 = <h4>Huang JX</h4>;
                // let children = [child1, child2, child3];

                // key 的错误，当数据的集合变化是，key 应该不变
                // 变化前：['Huang JX1', 'Huang JX2', 'Huang JX3']
                // 变化前：['Huang JX2', 'Huang JX3'， 'Huang JX20']

                // let childerStr = ['Huang JX1', 'Huang JX2', 'Huang JX3'];
                // let children = childerStr.map((item, index) => (
                //     <h4>{item}</h4>
                // ));

                
                let childerStr = [
                    {
                        id: 's01',
                        str: 'Huang JX1'
                    },
                    {
                        id: 's02',
                        str: 'Huang JX2'
                    },
                    {
                        id: 's03',
                        str: 'Huang JX3'
                    }
                ];

                let children = childerStr.map((item, index) => (
                    <h4 key={item.id}>{item.str}</h4>
                ));

                return (
                    <div>
                        {children}
                    </div>
                );
            }
        }

        let oDiv = document.getElementById('app');

        let cpt = <MyComponent />;

        ReactDOM.render(
            cpt,
            oDiv
        );
    </script>
</body>
</html>